<template>
    <div>
              <!-- 面包屑导航区域 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>权限列表</el-breadcrumb-item>
           
        </el-breadcrumb>

        <!-- 卡片视图 -->
        <el-card >
            <el-row>
                <el-col>
                    <el-button @click="showAddCateDialog" type="primary">添加分类</el-button>
                </el-col>
            </el-row>

            <!-- 表格 -->
            <tree-table :data="catelist" max-height="560px" 
            :columns="columns" :expand-type="false" :show-index="true" 
            :selection-type="false" index-text="序号" border stripe>

                <!-- 是否有效模板 -->
                <template slot="isok" slot-scope="scope">
                    <i class="el-icon-circle-check" 
                    v-if="scope.row.cat_deleted === false"
                    style="color: lightgreen; font-size:20px"></i>
                    <i class="el-icon-circle-close" style="color :red; font-size:20px" v-else></i>
                </template>

                <!-- 排序模板 -->
                <template slot="order" slot-scope="scope">
                    <el-tag v-if="scope.row.cat_level===0">一级</el-tag>
                    <el-tag type="success" v-else-if="scope.row.cat_level===1">二级</el-tag>
                    <el-tag type="warning" v-else>三级</el-tag>
                </template>

                <!-- 操作模板 -->
                 <template slot="opt" >
                    <el-button size="mini" type="primary" icon="el-icon-edit">编辑</el-button>
                    
                    <el-button size="mini" type="warning" icon="el-icon-delete">删除</el-button>
                </template>
            </tree-table>

            <!-- 分页区域  -->
             <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="querInfo.pagenum"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="10"
                layout="sizes, prev, pager, next"
                :total="total" >
            </el-pagination>
        </el-card>

        <!-- 添加分类对话框 -->
        <el-dialog
            title="添加分类"
            :visible.sync="addCatedialogVisible"
            width="50%" @close="addCateClose">

            <!-- 表单 -->
            <el-form :model="addCateForm" :rules="addCateFormrules" ref="addCateFormRef" label-width="100px" class="demo-ruleForm">
                <el-form-item label="分类名称" prop="cat_name">
                    <el-input v-model="addCateForm.cat_name"></el-input>
                </el-form-item>
                <el-form-item label="父级分类" >
                    <!-- 级联选择器 -->
                    <el-cascader
                        
                        v-model="selectedOptions2"
                        :options="setParentCateList"                       
                        @change="catHandleChange"
                        :props="cascaderProps" clearable change-on-select></el-cascader>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="addCatedialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addCate">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data(){
        return {
            // 级联选择器的选择数据
            selectedOptions2:[],
            // 级联选择器的配置项
            cascaderProps:{
                value:'cat_id',
                label:'cat_name',
                children:'children',
                expandTrigger:'hover'
            },
            // 存请求过来的父级分类
            setParentCateList:[],
            // 添加分类表单验证规则
            addCateFormrules:{
                cat_name:[
                    {required:true, message:'请输入分类名称', trigger:'blur'}
                ]
            },
            // 添加分类的表单数据
            addCateForm:{
                // 将要添加分类的名称
                cat_name:'',
                // 父级分类的Id
                cat_pid:0 ,
                // 分类的等级 默认一级
                cat_level:0
            },
            // 控制对话框
            addCatedialogVisible:false,
            // 查询条件
            querInfo:{
                type: 3,
                pagenum: 1,
                pagesize: 10
            },

            // 商品分类的数据列表
            catelist:[] ,

            // 数据条数
            total:0,

            // 为表格指定
            columns:[
                {
                label:'分类名称',
                prop:'cat_name'
                },
                {
                    label:'是否有效',
                    // 表示，将当前列定义为模板列
                    type:'template',
                    // 表示当前这一列使用模板名称
                    template:'isok'
                }, 
                {
                    label:'排序',
                    // 表示，将当前列定义为模板列
                    type:'template',
                    // 表示当前这一列使用模板名称
                    template:'order'
                },
                {
                    label:'操作',
                    // 表示，将当前列定义为模板列
                    type:'template',
                    // 表示当前这一列使用模板名称
                    template:'opt'
                }
            ]



        }
    },
    created(){
        this.getCateList()
    },
    methods:{
        // 获取数据商品分类
        async getCateList(){
             const {data:res} = await this.$http.get('categories', {params: this.querInfo})
            if(res.meta.status !== 200){
                return this.$message.error('获取商品分类列表失败！')
            }

            // 保存数据列表
            this.catelist = res.data.result
            this.total = res.data.total
        },
        // 监听分页区域，分页变化
        handleSizeChange(newSize){
            this.querInfo.pagesize = newSize
            this.getCateList()
        },
        // 监听pagenum改变
        handleCurrentChange(newPage){
            this.querInfo.pagenum = newPage
            this.getCateList()
        },
        // 对话框
        showAddCateDialog(){

            this.getParentCateList()
            this.addCatedialogVisible = true
        },
        // 获取父级分类的数据列表
        async getParentCateList(){
            const {data:res} = await this.$http.get('categories',{params : {type:2}})

            if(res.meta.status !== 200){
                return this.$message.error('获取父级分类数据失败!')
            }

            // console.log(res.data);
            this.setParentCateList = res.data
            // console.log(this.setParentCateList);

        },
        // 级联选择器选择值改变后触发
        catHandleChange(){
            console.log(this.selectedOptions2);
            // this.selectedOptions2 = []
            // 如果selectedOptions2 数组中的length大于0 证明选中数据了 反之则没有
            if(this.selectedOptions2.length > 0){
                // 父级分类的Id
                this.addCateForm.cat_pid = this.selectedOptions2[this.selectedOptions2.length -1]
                 // 为当前等级赋值s
                this.addCateForm.cat_level = this.selectedOptions2.length 
            }else{
                // 父级id
                this.addCateForm.cat_pid = 0;
                // fuji分类等级赋值
                this.addCateForm.cat_level = 0;
            }
           
        },
        // 点击确认添加分类按钮
        addCate(){
            // console.log(this.addCateForm);
            this.$refs.addCateFormRef.validate(async valid =>{
                if(!valid){
                    return
                }
                const {data:res} = await this.$http.post('categories',this.addCateForm)

                if(res.meta.status !== 201){
                    return this.$message.error('添加分类失败!')
                }

                this.$message.success('添加分类成功!')
                this.getCateList()
                this.addCatedialogVisible = false
            })
        },
        // 监听关闭对话框
        addCateClose(){
            // 关闭表单的时候重置所有数据
            this.$refs.addCateFormRef.resetFields()
            this.selectedOptions2 = []
             // 父级id
            this.addCateForm.cat_pid = 0;
            // fuji分类等级赋值
            this.addCateForm.cat_level = 0;
        }

    }
}
</script>

<style lang="less" scoped>
.tree-table{
    margin-top: 15px ;
}
.el-cascader{
    width: 100%;
}


</style>
